Day10 NavigationSplitView

與NavigationView類似，NavigationSplitView也是用來製作導覽換頁的元件，它可以自動產生一個到第二頁的動畫轉場。

由於SwiftUI跨平台的關係，如果需要同時支援iOS、iPadOS與VisionOS的話，會建議使用NavigationSplitView。

加入一個NavigationView，例如：

NavigationSplitView {
    Text("Hello, Navigation!")
} detail: {
    Text("NavigationSplitView detail")
}

NavigationSplitView可以在iPhone與iPad產生不同的版面，但都是同屬於NavigationView。

而這個NavigationView還無法產生連結，將要產生連結的內容，放入到NavigationLink內：

NavigationSplitView {
    NavigationLink {
        Text("Page2")
                
    } label: {
        Text("Hello, Navigation!")
    }
    .navigationTitle("Title")
} detail: {
    Text("NavigationSplitView detail")
}

加入屬性navigationTitle，可以設定NavigationView的header內容。

顯示如圖：

第二頁的內容可以另外製作一個View，然後取代原本的Text：

struct SwiftUIView10: View {
    var body: some View {
        NavigationSplitView {
            NavigationLink {
                Page2()
                
            } label: {
                Text("Hello, Navigation!")
            }
            .navigationTitle("Title")
        } detail: {
            Text("NavigationSplitView detail")
        }
    }
}

struct Page2: View {
    var body: some View {
        Text("Page2")
    }
}

所以按下中間的按鈕，就可以跳轉到第二頁，顯示如圖：

最後，如果要將值傳入給Page2，需要在Page2宣告一個變數，在呼叫時，直接帶入變數內容：

struct SwiftUIView10: View {
    var body: some View {
        NavigationSplitView {
            NavigationLink {
                Page2(title: "Hello Jake")
                
            } label: {
                Text("Hello, Navigation!")
            }
            .navigationTitle("Title")
        } detail: {
            Text("NavigationSplitView detail")
        }
    }
}

struct Page2: View {
    
    var title: String
    
    var body: some View {
        Text("Page2: \(title)")
    }
}

顯示如圖：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day10 [完]